<template>
  <div class="product-container-border">
    <div class="product-container">
      <img :src="detail.img" class="product-img" @click="onDetail">
      <div class="info-container">
        <div class="price-name" @click="onDetail">
          <span class="price">${{ detail.price }}</span>
          <a-tooltip>
            <template #title>{{ detail.name }}</template>
            <span class="g-single-line">{{ detail.name }}</span>
          </a-tooltip>
        </div>
        <div class="sales-container">
          <div class="month-sales">
            <span class="label">近期销量:</span>
            <span class="value">{{ detail.sales || '-' }}</span>
          </div>
          <div v-if="detail.salesChange" class="sales-change"
            :style="detail.salesChange > 0 ? 'background: #FF4050' : 'background: #3CC781'">
            <!-- <span>月|</span> -->
            <img src="@i/icon/up-icon.png" class="icon" v-if="detail.salesChange > 0">
            <img src="@i/icon/down-icon.png" class="icon" v-else>
            <span>{{ Math.abs(detail.salesChange || 0) * 100 }}%</span>
          </div>
        </div>
      </div>
      <div class="button-container">
        <div class="icon-button mr16" @click="onCollect(detail)">
          <img src="@i/icon/a-collect-icon.png" class="icon" v-if="detail.collect">
          <img src="@i/icon/collect-icon.png" class="icon" v-else>
          <span>关注</span>
        </div>
        <div class="icon-button mr16" @click="copyText(detail.outUrl)" @mouseenter="isOverCopyIcon = true"
          @mouseleave="isOverCopyIcon = false" :style="isOverCopyIcon ? 'color:#FF6923' : ''">
          <img src="@i/icon/copy-icon.png" class="icon" v-if="!isOverCopyIcon">
          <img src="@i/icon/a-copy-icon.png" class="icon" v-if="isOverCopyIcon">
          <span>复制</span>
        </div>
        <div class="icon-button" @click="onNewUrl(detail.outUrl)" @mouseenter="isOverDetailIcon = true"
          @mouseleave="isOverDetailIcon = false" :style="isOverDetailIcon ? 'color:#FF6923' : ''">
          <img src="@i/icon/detail-icon.png" class="icon" v-if="!isOverDetailIcon">
          <img src="@i/icon/a-detail-icon.png" class="icon" v-if="isOverDetailIcon">
          <!-- <icon class="icon" style="font-size: 16px;color: red;">
            <template #component>
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                width="10.364181518554688" height="12" viewBox="0 0 10.364181518554688 12">
                <path
                  d="M10.3636,10.9091C10.3636,11.5116,9.87522,12,9.27273,12L1.09091,12C0.488417,12,0,11.5116,0,10.9091L0,1.09091C0,0.488417,0.488417,0,1.09091,0L6.61309,0L6.65945,0.00163625C6.74673,0.0103634,6.83454,0.0436363,6.91255,0.106363L10.1853,2.74364C10.3075,2.84182,10.3625,2.97436,10.3642,3.10582L10.3636,10.9091ZM6.13582,0.954546L1.09091,0.954546C1.02766,0.954651,0.972785,0.998235,0.958364,1.05982L0.954545,1.09091L0.954545,10.9091C0.95465,10.9723,0.998235,11.0272,1.05982,11.0416L1.09091,11.0455L9.27273,11.0455C9.33598,11.0454,9.39085,11.0018,9.40527,10.9402L9.40909,10.9091L9.40909,3.59236L6.61309,3.59236C6.37271,3.59235,6.16985,3.41356,6.13964,3.17509L6.13582,3.11509L6.13582,0.954546ZM7.69527,7.67727C7.75309,7.67727,7.8,7.72418,7.8,7.782L7.8,8.15455C7.8,8.41814,7.58632,8.63182,7.32273,8.63182L2.66836,8.63182C2.61052,8.63182,2.56364,8.58493,2.56364,8.52709L2.56364,8.15455C2.56364,7.89109,2.77745,7.67727,3.04091,7.67727L7.69527,7.67727ZM7.69527,5.35909C7.75309,5.35909,7.8,5.406,7.8,5.46382L7.8,5.83636C7.8,6.09996,7.58632,6.31364,7.32273,6.31364L2.66836,6.31364C2.61052,6.31364,2.56364,6.26675,2.56364,6.20891L2.56364,5.83636C2.56364,5.57291,2.77745,5.35909,3.04091,5.35909L7.69527,5.35909ZM7.09036,1.47546L7.09036,2.63782L8.53309,2.63782L7.09036,1.47546Z"
                  fill="#666666" fill-opacity="1" />
              </svg>
            </template>
          </icon> -->
          <span>shein详情</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Icon, { HomeOutlined } from '@ant-design/icons-vue';
import { copyText } from '@u/tools'
import { subProduct, unSubProduct } from '@r/api/userSub'
import { useRouter } from 'vue-router'
const appRouter = useRouter()
onMounted(() => {
});
const props = withDefaults(
  defineProps<{
    detail: any;  // 详细内容
  }>(),
  {
    detail: 0,
  }
);
function onDetail() {
  const query = {
    id: props.detail.id,
  }
  // return
  let routeUrl = appRouter.resolve({
    path: '/productDetail',
    query,
  })
  //  const router = useRouter()
  //  let routeUrl = router.resolve({
  //      path: "/home"
  //  });
  window.open(routeUrl.href, '_blank');

}
let isOverDetailIcon = ref<boolean>(false)
let isOverCopyIcon = ref<boolean>(false)
function onCollect(detail: any) {
  if (detail.collect) {
    unSubProduct({ productId: detail.id }).then(res => {
      detail.collect = !detail.collect
    })
  } else {
    subProduct({ productId: detail.id }).then(res => {
      detail.collect = !detail.collect
    })
  }
}
function onNewUrl(outUrl: string) {
  window.open(outUrl, '_blank')
}
</script>

<style scoped lang="less">
.product-container-border :hover {
  // border: #FA7D54 1px solid;
  border-color: #FA7D54;
}

.product-container {
  width: 210px;
  height: 320px;
  border-radius: 10px;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #EFEFEF;
  margin: 0 18px 20px 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;

  .product-img {
    height: 208px;
    border-bottom: 1px solid #eee;
    border-radius: 10px 10px 0 0;
  }

  .info-container {
    height: 70px;
    border-bottom: 1px #EFEFEF solid;
    margin: 0 10px;
    padding: 13px 0;
    display: flex;
    flex-direction: column;

    .price-name {
      display: flex;
      flex-direction: row;
      align-items: center;

      .price {
        color: #FF6923;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }

  .sales-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .month-sales {
      flex-direction: row;

      .label {
        color: #666666;
        font-size: 12px;
        margin-right: 4px;
      }

      .value {
        color: #FF6923;
        font-size: 18px;
      }
    }

    .sales-change {
      height: 18px;
      border-radius: 4px;
      padding: 0 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #fff;
      font-size: 12px;

      .icon {
        height: 14px;
        width: 14px;
        margin: 0 2px;
      }
    }
  }

  .button-container :hover {
    color: #FF6923;
  }

  .icon-button :hover {
    color: #FF6923;
  }

  .button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    margin: 0 10px;

    .icon-button {
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 12px;
      color: #666666;
      cursor: pointer;
    }

    .icon {
      height: 12px;
      width: 12px;
      margin-right: 4px;
    }

    // .icon-detail {
    //   background-image: url('@i/icon/detail-icon.png');
    //   height: 12px;
    //   width: 12px;
    //   margin-right: 4px;
    // }

    // .icon-detail :hover {
    //   background-image: url('@i/icon/a-detail-icon.png');
    //   height: 12px;
    //   width: 12px;
    //   margin-right: 4px;
    // }
  }
}
</style>